<template>
    <div class="help-text-warp">
      <div class="help-text-search">
        <h1>组工助手</h1>
        <div>
          <el-input
            placeholder="我们能帮你什么吗？"
            size="medium"
            clearable
            style="width: 500px; height: 50px; border-radius: 10px"
            v-model="queryForm.textTitle"
          />
          <el-button size="medium" icon="el-icon-search" @click="getTextList">
            搜索
          </el-button>
        </div>
        <p>
          <span>
            热门标签：
            <font
              v-for="(item, index) in items"
              style="font-size: 16px"
              :key="index"
              @click="searchByTag(item.label)"
              >{{ item.label }}&nbsp;</font
            >
          </span>
        </p>
      </div>
  
      <div class="help-text-content">
        <p><i class="el-icon-question" style="color: red" />常见搜索</p>
        <ol>
          <li v-for="(item, index) in textItem" :key="index">
            <a @click="showPopUp(index)">{{ item.textTitle }}</a>
          </li>
        </ol>
      </div>
      <div class="help-text-footer">
        <el-card class="box-card">
          <i class="el-icon-video-play" />
          <p>入门</p>
          <span>在30分钟内开始使用HelpTextSearch</span>
        </el-card>
        <el-card class="box-card">
          <i class="el-icon-video-play" />
          <p>入门</p>
          <span>在30分钟内开始使用HelpTextSearch</span>
        </el-card>
        <el-card class="box-card">
          <i class="el-icon-video-play" />
          <p>入门</p>
          <span>在30分钟内开始使用HelpTextSearch</span>
        </el-card>
      </div>
      <helpSearchDialog
        ref="helpSearchDialogRef"
        v-if="helpSearchDialogFlag"
        :selected-item="selectedItem"
      />
    </div>
  </template>
  <script>
  import helpSearchDialog from "./helpSearchDialog.vue";
  import { helpTextList } from "@/api/datacentersz/archives/helpText";
  import { getList } from "@/api/datacentersz/archives/label";
  import store from "@/store";
  export default {
    components: { helpSearchDialog },
    data() {
      return {
        items: [],
        searchResults: [],
        textTitle: [],
        total: 0,
        page: {
          currentPage: 1,
          pageSize: 10,
        },
        queryForm: {
          textTitle: ``,
          textLabel: ``,
        },
        isParent: `parent`,
        selectedItem: null,
        textItem: [],
        isParentDataLoaded: false,
        helpSearchDialogFlag: false,
        helpShowTextPageFlag: false,
      };
    },
    created() {
      this.getTagDataList();
      this.getTextTitle();
      this.init();
    },
    methods: {
      init() {
        this.helpShowTextPageFlag = true;
        this.helpSearchDialogFlag = true;
      },
      searchByTag(label) {
        this.queryForm.textLabel = label;
        console.log(this.queryForm.textLabel);
        this.getTextList().then(() => {
          let route = this.$router.resolve({
            path: "/helpShowTextPage",
            query: {
              // searchResults: JSON.stringify(this.searchResults),
              searchLabel: this.queryForm.textLabel,
              total: this.total,
              isParentDataLoaded: this.isParentDataLoaded,
            },
          });
          window.open(route.href, "_blank");
        });
      },
  
      getTextList() {
        return new Promise((resolve, reject) => {
          const params = {
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            // userName: store.getters.userName.toString(),
            data: {
              textBussinessTypeCode: 111,
              textTitle: this.queryForm.textTitle,
              pageSize: this.page.pageSize,
              currentPage: this.page.currentPage,
            },
          };
          if (this.queryForm.textLabel.length > 0) {
            params.data.textLabel = this.queryForm.textLabel;
          }
          helpTextList(params)
            .then((data) => {
              if (data.result) {
                this.searchResults = data.resultdata.data;
                this.total = data.resultdata.count;
                this.helpShowTextPageFlag = true;
  
                let route = this.$router.resolve({
                  path: "/helpShowTextPage",
                  query: {
                    // searchResults: JSON.stringify(this.searchResults),
                    searchTxt: this.queryForm.textTitle,
                    searchLabel: this.queryForm.textLabel,
                    total: this.total,
                    isParentDataLoaded: this.isParentDataLoaded,
                  },
                });
                window.open(route.href, "_blank");
  
                resolve();
              }
            })
            .catch((error) => {
              reject(error);
            });
        });
      },
      getTextTitle() {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          // userName: store.getters.userName.toString(),
          data: { textBussinessTypeCode: 111 },
        };
        helpTextList(params).then((data) => {
          if (data.result) {
            this.textItem = data.resultdata.data.slice(0, 9);
          }
        });
      },
  
      showPopUp(index) {
        // 根据索引获取相应的数据并将其赋值给selectedItem
        this.helpSearchDialogFlag = true;
        this.selectedItem = this.textItem[index];
        this.$refs.helpSearchDialogRef.init();
      },
  
      getTagDataList() {
        const params = {
          data: { fileBusinessTypeId: `111` },
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          // userName: store.getters.userName.toString(),
        };
        getList(params).then((data) => {
          if (data.result) {
            const items = [];
            data.resultdata.data.forEach(function (obj, index) {
              items.push({
                label: obj.labelName,
                index: index,
              });
            });
  
            this.items = items;
          }
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .help-text-warp {
    padding: 10px 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: #fff;
    .help-text-search {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url("https://i-1.lanrentuku.com/2020/7/9/65fd8b29-ceed-4235-bc80-2e18f007b734.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 250px;
      color: #fff;
      .el-input__icon .el-icon-search {
        margin-top: -10px;
      }
    }
    .help-text-content {
      //  padding: 0 300px;
      margin-left: 350px;
      height: 300px;
      p {
        display: inline-block;
        font-size: 20px;
        font-weight: bolder;
        padding: 20px 0;
      }
      ol {
        display: flex;
        flex-wrap: wrap;
        li {
          color: gray; /* 灰色 */
          padding: 5px;
          flex-basis: calc(33.33% - 10px);
          a {
            color: #2f67c3;
            text-decoration: none;
          }
          a:hover {
            text-decoration: underline;
          }
        }
      }
    }
  
    .help-text-footer {
      padding: 0 400px;
      display: flex; /* 将容器设置为弹性盒子 */
      flex-wrap: wrap; /* 当容器宽度不足以容纳所有项时换行 */
      justify-content: space-around; /* 在每个项目之间平均分配空间 */
      .box-card {
        width: calc(33.33% - 10px); /* 设置卡片宽度为容器宽度的1/3减去间距 */
        margin-top: 10px;
        i {
          font-size: 60px;
          color: #2f67c3;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        p {
          text-align: center;
          font-size: 20px;
          font-weight: bolder;
        }
        span {
          text-align: center;
          display: inline;
        }
      }
    }
  }
  </style>
  